<template>
  <el-dialog custom-class="custom" :visible.sync="dialogVisible" width="500px">
    <div slot="title" class="dialog-title">提示信息</div>

    <div class="flexCommon">
      <i class="el-icon-success el-alert__icon is-big" style="color: #3EC504;" /><span>&nbsp;&nbsp;{{ content }}</span>
    </div>
    <div style="color:#333;padding-top: 10px;">你可以在接入应用集及块列表中查看</div>
  </el-dialog>
</template>
<script>
export default {
  name: 'ConfirmDialog1',
  props: {
    isUnable: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: '保存成功'
    },
    cancelTxt: {
      type: String,
      default: '取消'
    },
    confirmTxt: {
      type: String,
      default: '确认'
    },
    projectName: {
      type: String,
      default: ''
    },
    isInput: {
      type: Boolean,
      default: false
    },
    isSuccess: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      inputValue: this.projectName
    }
  },
  watch: {
    projectName() {
      this.inputValue = this.projectName
    }
  },
  methods: {
    confirm() {
      this.loading = false
      this.dialogVisible = false
      this.$emit('confirm', () => {
        this.loading = false
      })
    },
    setDialogVisible(val) {
      this.dialogVisible = val
    },
    cancel() {
      this.dialogVisible = false
      this.$emit('cancel')
    },
    changeValue() {
      this.$emit('update:projectName', this.inputValue)
    }
  }
}
</script>
<style lang="scss">
.custom {
  font-weight: 700;
  font-size: 14px;
  height: 240px;

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .el-dialog__header {
    background-color: rgba(37, 148, 255, 1);
    color: #fff;
  }

  .el-dialog__body {
    color: rgba(53, 152, 220, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px 0;

    span {
      color: #333;
    }

    .el-input {
      width: auto;
    }
  }

  .el-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }

}</style>
